<template>
  <div v-if="detail">
    <div class="p-12 text-center">
      <img
        class="w-40 h-40 rounded-1 mr-4"
        :src="detail.brandLogo"
        alt=""
        srcset=""
      />
      <h1 class="text-5xl m-8">{{ detail.jobName }}</h1>
      <p class="mt-20">{{ detail.brandName }}</p>
    </div>
    <ul class="flex justify-around p-8">
      <li>{{ detail.salaryDesc }}</li>
      <li>{{ detail.cityName }} · {{ detail.areaDistrict }}</li>
    </ul>
    <h3 class="p-8">岗位要求</h3>
    <div class="p-8">
      <van-tag
        type="warning"
        v-for="(item, index) in detail.jobLabels"
        :key="index"
        class="mr-4 mb-4"
        >{{ item }}</van-tag
      >
    </div>
    <h3 class="p-8">福利待遇</h3>
    <div class="p-8">
      <van-tag
        type="warning"
        v-for="(item, index) in detail.welfareList"
        :key="index"
        class="mr-4 mb-4"
        >{{ item }}</van-tag
      >
    </div>
  </div>
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
    class="pb-50"
    offset="20"
  >
    <div class="flex p-8 justify-between flex-wrap">
      <job-item v-for="item in jobList" :jdata="item" />
    </div>
  </van-list>
  <div
    class="flex p-6 w-full box-border fixed bottom-0 left-0 bg-white shadow-light-900"
  >
    <van-button @click="">
      <i class="iconfont icon-shoucang"></i>
    </van-button>
    <van-button
      v-if="joinState == 1"
      class="flex-1"
      type="warning"
      @click="handleJoin"
      >立即申请</van-button
    >
    <van-button class="flex-1" v-if="joinState == 2" color="#778899" @click=""
      >等待审核</van-button
    >
    <van-button class="flex-1" v-if="joinState == 3" color="#7788dd" @click=""
      >预约面试</van-button
    >
    <van-button class="flex-1" v-if="joinState == 4" color="#FF6677" @click=""
      >直接拒绝</van-button
    >
    <van-button class="flex-1" v-if="joinState == 5" color="#66DD99" @click=""
      >面试通过</van-button
    >
  </div>
</template>

<script setup lang="ts">
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
import { jobDetailGet, joinPost, joinCheck } from "../api/job";
import { ref } from "vue";
import { JobType } from "../types/job";
import { useAccount } from "../store/user";
const route = useRoute();
// console.log(route.params);
const detail = ref<JobType>();
let res = await jobDetailGet(route.params.id as string);
// console.log(res);
detail.value = res.data;

//调用自定义hooks
import { useJobList } from "../hooks/index";
const { loading, finished, jobList, onLoad } = useJobList();

//路由--组件内守卫
onBeforeRouteUpdate(async (to, _, next) => {
  // console.log(to);
  let res = await jobDetailGet(to.params.id as string);
  detail.value = res.data;
  next();
});

// 岗位申请
const user = useAccount();
const router = useRouter();
const handleJoin = () => {
  if (user.userInfo) {
    if (user.userInfo.resume) {
      //申请逻辑
      joinFuc();
    } else {
      router.push("/setting");
    }
  } else {
    router.push("/login");
  }
};
const joinState = ref(1); //控制按钮状态
const joinFuc = () => {
  let userId = user.userInfo!.objectId;
  let jobId = detail.value!.objectId;
  let { jobName, brandName, salaryDesc } = detail.value!;
  joinPost({
    userId,
    jobId,
    jobName,
    brandName,
    salaryDesc,
    joinState: 2,
  }).then(() => {
    joinState.value = 2;
  });
};

// 首屏渲染确定岗位报名状态
let userId = user.userInfo ? user.userInfo.objectId : "";
let jobId = route.params.id as string;
joinCheck(userId, jobId).then((res) => {
  let { results } = res.data;
  if (results.length) {
    joinState.value = results[0].joinState; //使用后端下发的报名状态，控制按钮
  }
});
</script>

<style></style>
